<template>
    <div class="content">
        <!-- 画面 -->
        <div :class="{ 'screen': true,'screenSuccess': pageflag,'screenError': !pageflag}">
            <div ref="container"></div>
<!--            <div class="playable"></div>-->
            <img
                src=""
                v-if="isReset"
                @click="playable"
            >
        </div>
    </div>
</template>

<script>
export default {
    props: ['m3u8Url', 'isReset'],
    data() {
        return {
            pageflag: true,
            jessibuca: null,
            // 判断是否可以调用父组件方法
            isCanCallParent: false,
            // 是否显示自定义播放按钮
            isReset: true,
        };
    },
    watch: {
        isReset(newVal, oldVal) {
            if (!newVal){
                // this.jessibuca.pause();
            }
        }
    },
    created() {
    },
    // mounted() {
    //     this.jessibuca = new Jessibuca({
    //         container: this.$refs.container,
    //         videoBuffer: 0.2, // 缓存时长
    //         isResize: false,
    //         text: "",
    //         loadingText: "加载中",
    //         debug: true,
    //         decoder: "./decoder.js",
    //         showBandwidth: true, // 显示网速
    //         operateBtns: {
    //             fullscreen: true,
    //             screenshot: true,
    //             play: true,
    //             audio: false,
    //             record: false
    //         },
    //         forceNoOffscreen: true,
    //         isNotMute: false,
    //         heartTimeout: 100,
    //         controlAutoHide: true,
    //         hiddenAutoPause: true,
    //     },);
    //     this.jessibuca.play(this.m3u8Url)
    //         .then(() => {
    //             setTimeout(()=>{
    //                 // 暂停播放
    //                 this.jessibuca.pause();
    //                 this.isCanCallParent = true;
    //             },1000)
    //         })
    //
    //     // 播放事件
    //     this.jessibuca.on("play", (flag) => {
    //         if (this.isCanCallParent) {
    //             // 调用父组件的方法
    //             this.$parent.pauseVideo(this.$refs);
    //         }
    //     });
    // },
    beforeDestroy() {
    },
    methods: {
        // 初始化jessibuca播放器，播放视频
        playable() {
            this.isReset = false;
            this.jessibuca = new Jessibuca({
                container: this.$refs.container,
                videoBuffer: 0.2, // 缓存时长
                isResize: false,
                text: "",
                loadingText: "加载中",
                debug: true,
                decoder: "./decoder.js",
                showBandwidth: true, // 显示网速
                operateBtns: {
                    fullscreen: true,
                    screenshot: true,
                    play: true,
                    audio: false,
                    record: false
                },
                forceNoOffscreen: true,
                isNotMute: false,
                heartTimeout: 100,
                controlAutoHide: true,
                hiddenAutoPause: true,
            },);
            this.jessibuca.play(this.m3u8Url)
                // .then(() => {
                //     setTimeout(()=>{
                //         // 暂停播放
                //         this.jessibuca.pause();
                //         this.isCanCallParent = true;
                //     },1000)
                // })
            // this.$parent.pauseVideo(this.$refs);
            // 播放事件
            this.jessibuca.on("play", (flag) => {
                // if (this.isCanCallParent) {
                    // 调用父组件的方法
                    this.$parent.pauseVideo(this.$refs);
                // }
            });
        },
        // 主动暂停播放
        onPlayerMuted() {
            console.log("主动暂停播放")
            this.jessibuca.pause();
        },
    },
};
</script>
<style lang='scss' scoped>
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url("../../assets/img/monitoring-border.png");
    background-size: cover;

    .screen {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        //background-image: url("../../assets/img/img.png");
        background-color: #000;
        background-size: cover;
        margin-top: 10px;
        //position: relative;
    }

    .screenSuccess {
        //background-image: url("../../assets/img/img.png");
        background-color: #000;
    }
    .screenError {
        background-image: url("../../assets/img/DefaultPage.jpg");
    }
}
</style>
